import Vue from "vue";
import App from "./App.vue";
import "./index.css";
import channels from "./store/channels";
import articles from "./store/articles";
// 1. 导入vuex
import Vuex from "vuex";
// 2. 使用Vue.use注册vuex
Vue.use(Vuex);
// 3. 创建一个vuex实例
const store = new Vuex.Store({
    state: {
        count: 0,
        list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        channels: [],
    },
    getters: {
        // getters 第一个参数为state
        filterList(state) {
            return state.list.filter((item) => item % 2 === 0);
        },
    },
    mutations: {
        // mutations 第一个参数为state，第二个参数为载荷
        // payload 接收传入的值
        addCount(state, payload) {
            state.count += payload;
        },
        setChannels(state, channels) {
            state.channels = channels;
        },
    },
    actions: {
        // 延迟一秒触发++
        // actions第一个参数为上下文 -> 当前的store实例,第二个参数为载荷
        // payload 接收传入的值
        addAsyncCount(ctx, payload) {
            // actions可以写异步，可以调用mutation
            setTimeout(() => {
                //ctx: 上下文 -> 当前的store实例
                ctx.commit("addCount", payload);
            }, 1000);
        },
        // http://geek.itheima.net/v1_0/channels
        // 请求接口案例
        // 1. 定义一个actions请求接口
        // 2. 定义state
        // 3. 更新state -> mutations
        getChannels(ctx) {
            fetch("http://geek.itheima.net/v1_0/channels")
                .then((response) => response.json())
                .then((data) => {
                    console.log(data);
                    const {
                        // 解构第一层data
                        // 解构第二层channels
                        data: { channels },
                    } = data;
                    ctx.commit("setChannels", channels);
                });
        },
    },
    modules: {
        // user 代表一个模块，可以把user当做模块名，可以任意取值。user这个对象可以定义state getters mutations actions modules
        // 没有加namespaced，mutation是全局的方法
        channels,
        articles,
        user: {
            namespaced: true,
            state: {
                name: "我不是黑马的",
            },
            mutations: {
                setName(state) {
                    state.name = "但是我是传智的";
                },
            },
            actions: {
                setActionName(ctx) {
                    // 在action中调用mutation不需要写 模块名/
                    ctx.commit("setName");
                },
            },
        },
        test: {
            state: {
                name: "我不是某某谷的",
            },
        },
    },
});

Vue.config.productionTip = false;
// 4. store挂载到根实例中
new Vue({
    render: (h) => h(App),
    store,
}).$mount("#app");
